<template>
	<view class="store">
		<Navbar>商行</Navbar>
		<view class="header">
			<view class="title">官银</view>
			<view class="money">
				<view class="value">{{silver}}</view>
				<!-- <view class="btn" @click="router('/pages/home/withdrawal')">提现</view> -->
			</view>
			<view class="merchant" @click="open(4)">
				<image :src="`${baseImageUrl}/home/store.png`"></image>
			</view>
		</view>
		<view class="tabs">
			<view class="item" :class="active==item.key?'active':''" v-for="item in scroll"
				@click="changeActive(item.key)">{{item.title}}</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view v-if="active==2||active==3||active==4">
					<view class="item">
						<view class="name">{{advert.name}}</view>
						<view class="cover">
							<image :src="advert.image"></image>
						</view>
						<view class="price">
							<text class="value">看广告领取</text>
						</view>
					</view>
					<view class="btn" @click="query_receive">
						<view>{{text[advert_status]}}</view>
					</view>
				</view>
				<view v-if="active==2||active==3">
					<view class="item">
						<view class="name">{{name}}</view>
						<view class="cover">
							<image :src="cover"></image>
						</view>
						<view class="price">
							<image :src="`${baseImageUrl}/common/gy.png`"></image>
							<text class="value">{{price}}</text>
						</view>
					</view>
					<view class="btn" @click="buy_click()">
						<view>购买</view>
					</view>
				</view>
				<view v-for="item in list">
					<view class="item">
						<view class="name">{{item.name}}</view>
						<view class="cover" @click="showDeta(item.id)">
							<image :src="item.cover"></image>
						</view>
						<view class="price">
							<image :src="`${baseImageUrl}/common/gy.png`"></image>
							<text class="value">{{item.price_silver}}</text>
						</view>
					</view>
					<view class="btn" @click="buy_click(item)">
						<view>购买</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" bgColor="transparent" mode="center" :overlay="false" @close="close">
			<StoreDeta :id="id" @close="close" />
		</u-popup>

		<u-popup :show="popup_show" bgColor="transparent" overlayOpacity="0.8" mode="center" @close="close">
			<StoreBuy :res="res" @close="close" @success="buy_success" @fail="fail" v-if="type==1" />
			<StoreBuySuccess :id="id" @close="close" v-else-if="type==2" />

			<StoreBuyFail @close="close" :msg="msg" v-else-if="type==3" />
			<StoreMerchant @close="close" @confirm="confirm" v-else-if="type==4" />
			<ExchangeSuccess @close="close" v-else-if="type==5" />

			<StoreBuyTwo :active="active" :res="res" @success="success" @close="close" @fail="fail"
				v-else-if="type==6" />

			<StoreBuySuccessTwo :product="product" @close="close" v-else-if="type==7" />

			<StoreBuyPopup :res="res" @confirm="buy_confirm" @close="close" v-else-if="type==8" />
		</u-popup>
	</view>
</template>

<script>
	import {
		productLists,
		productExchange,
		productAdvert
	} from '@/request/api.js';
	import StoreDeta from '@/components/home/StoreDeta.vue';

	import StoreBuy from '@/components/home/StoreBuy.vue';
	import StoreBuySuccess from '@/components/home/StoreBuySuccess.vue';
	import StoreBuyFail from '@/components/home/StoreBuyFail.vue';
	import StoreMerchant from '@/components/home/StoreMerchant.vue';
	import ExchangeSuccess from '@/components/home/ExchangeSuccess.vue';
	import StoreBuyTwo from '@/components/home/StoreBuyTwo.vue';
	import StoreBuySuccessTwo from '@/components/home/StoreBuySuccessTwo.vue';
	import StoreBuyPopup from '@/components/home/StoreBuyPopup.vue';

	export default {
		components: {
			StoreDeta,
			StoreBuy,
			StoreBuySuccess,
			StoreBuyFail,
			StoreMerchant,
			ExchangeSuccess,
			StoreBuyTwo,
			StoreBuySuccessTwo,
			StoreBuyPopup
		},
		data() {
			return {
				active: 1,
				limit: 30,
				silver: 0.00,
				scroll: [],
				list: [],

				show: false,
				id: null,

				dist: false,
				res: {},
				show_item: {},
				popup_show: false,
				type: 1,

				msg: "",

				setting: {},
				name: "",
				cover: "",
				price: "",
				advert: {
					image: "",
					name: ""
				},
				advert_status: "",
				text: {
					0: "看广告领取",
					1: "免费领取",
					2: "今日已领取"
				},
				product: {}
			}
		},
		async onLoad() {
			let {
				prop_type,
				silver,
				setting
			} = await productLists({
				type: 3
			});
			this.setting = setting;
			this.silver = silver;
			this.scroll = prop_type;
			this.active = prop_type.length ? prop_type[0].key : "";
		},
		onShow() {
			this.getList();
		},
		onHide() {
			this.page = 1;
			this.list = [];
		},
		methods: {
			async getList() {
				let {
					silver,
					list,
					advert_status
				} = await productLists({
					type: 3,
					page: this.page,
					limit: this.limit,
					prop_type: this.active
				});
				this.advert_status = advert_status;
				this.last_page = list.last_page;
				list = list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];
				this.loadmore_status = this.last_page == this.page ? 'nomore' : 'loadmore';
			},
			async getSilver() {
				let {
					silver
				} = await productLists({
					type: 3
				});
				this.silver = silver;
			},
			loadmore() {
				if (this.page < this.last_page) {
					this.page++;
					this.getList();
				}
			},
			changeActive(key) {
				this.active = key;
				this.page = 1;
				this.list = [];
				this.getList();

				const setting = this.setting;
				if (key == 2) {
					this.name = setting.pet_name;
					this.cover = setting.pet_img;
					this.price = setting.pet_silver;

					this.advert = {
						image: setting.advert_pet_img,
						name: setting.advert_pet_name
					};
				}
				if (key == 3) {
					this.name = setting.skillbook_name;
					this.cover = setting.skillbook_img;
					this.price = setting.skillbook_silver;

					this.advert = {
						image: setting.advert_skillbook_img,
						name: setting.advert_skillbook_name
					};
				}
				if (key == 4) {
					this.advert = {
						image: setting.advert_antique_img,
						name: setting.advert_antique_name
					};
				}
			},
			async query_receive() {
				let {
					advert_status,
					active
				} = this;
				if (advert_status == 0) {
					uni.$u.throttle(() => {
						this.navigate(`5_${active}`)
					}, 3000);
				}
				if (advert_status == 1) {
					let {
						id
					} = await productAdvert({
						prop_type: active
					});
					this.id = id;
					this.open(2);
					this.$u.toast("操作成功");
					this.advert_status = 2;
				}
			},
			buy_click(item) {
				let res = {};
				if (!item) {
					this.dist = true;
					res = {
						name: this.name,
						cover: this.cover,
						price: this.price
					};
				} else {
					this.dist = false;
					res = {
						id: item.id,
						name: item.name,
						cover: item.cover,
						price: item.price_silver
					};
				}
				this.res = res;
				this.open(8);
			},
			buy_confirm(item) {
				this.res = {
					...this.res,
					...item
				};
				this.dist ? this.open(6) : this.open(1);
			},
			showDeta(id) {
				this.id = id;
				this.show = true;
			},
			open(index) {
				this.type = index;
				this.popup_show = true;
			},
			// open(index, item) {
			// 	this.type = index;
			// 	this.id = item?.id;
			// 	this.popup_show = true;
			// },
			close() {
				this.show = false;
				this.popup_show = false;
				this.getSilver();
			},
			buy_success(id) {
				this.id = id;
				this.type = 2;
			},
			success(item) {
				this.product = item;
				this.type = 7;
			},
			fail(msg) {
				this.msg = msg;
				this.type = 3;
			},
			// 商人兑换
			async confirm(data) {
				await productExchange(data)
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getList();
					this.close();
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.store {
		min-height: 100vh;
		background: #29170D;

		.header {
			width: 100%;
			height: 224rpx;
			padding: 55rpx 0 0 45rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/home/h1.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.merchant {
				width: 241rpx;
				height: 249rpx;
				position: absolute;
				right: 40rpx;
				top: -32rpx;
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				color: #FFFFFF;
				font-size: 42rpx;
				font-weight: 400;
				font-family: LiSu;
			}

			.money {
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				.value {
					width: 186rpx;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					color: #FFFEFE;
					font-size: 30rpx;
					font-family: AlibabaPuHuiTi;
					font-weight: 400;
					margin-right: 22rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/home/money.png) no-repeat;
					background-size: 100% 100%;
				}

				.btn {
					width: 130rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					color: #494338;
					font-size: 36rpx;
					font-weight: 400;
					font-family: LiSu;
					background: url(@/static/images/add/1202_1.png) no-repeat;
					// background: url(#{$baseImageUrl}/home/money.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.tabs {
			width: 710rpx;
			height: 100rpx;
			margin: 0 auto;
			padding: 0 15rpx;
			box-sizing: border-box;
			background-color: rgba(31, 11, 5, 0.6);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				font-family: LiSu;

				&.active {
					color: #494338;
					background: url(#{$baseImageUrl}/common/active.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - 324rpx);
			background: url(#{$baseImageUrl}/bg/jz.png) no-repeat;
			background-size: 100% 100%;

			.list {
				width: 100%;
				padding: 0 60rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.btn {
					display: flex;
					justify-content: center;

					view {
						width: 184rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
						background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.item {
					width: 202rpx;
					height: 262rpx;
					margin-right: 8rpx;
					padding-top: 50rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/common/item_202_262.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.name {
						color: #483221;
						font-size: 24rpx;
						font-family: SimSun;
						font-weight: 400;
					}

					.cover {
						width: 130rpx;
						height: 130rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.price {
						height: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 22rpx;
							height: 22rpx;
							margin-right: 10rpx;
						}

						.value {
							color: #483221;
							font-size: 24rpx;
							font-family: Segoe UI Emoji;
							font-weight: 400;
						}
					}
				}

				.item:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>